<template>
  <div class="hot">
    <h6>热门城市</h6>
    <ul>
      <li v-for="(item,index) in list"
          :key="index"
          @click="searchAction(list[index])">{{item.name}}</li>
      <div class="clearfix"></div>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'HotCity',
  data: function () {
    return {
      list: [],
    }
  },
  created () {
    this.$axios.get('https://elm.cangdu.org/v1/cities', {
      params: {
        type: 'hot',
      }
    }).then(res => {
      // console.log(res);
      this.list = res.data;
      console.log(this.list)
    }).catch(err => console.log(err));
  },
  methods: {
    searchAction (list) {
      this.$router.push({ name: 'SearchCity', params: { datas: list.name, cid: list.id } })

    }
  },
}
</script>

<style lang="less">
.hot {
  background-color: white;

  h6 {
    font-size: 12px;
    color: #666;
    font-weight: 400;
    text-indent: 0.45rem;
    padding: 10px 0;
    border-top: 2px solid #e4e4e4;
    border-bottom: 1px solid #e4e4e4;
  }
  ul {
    margin-bottom: 10px;
    li {
      float: left;
      text-align: center;
      color: #3190e8;
      border-bottom: 0.1px solid #e4e4e4;
      border-right: 0.1px solid #e4e4e4;
      width: 25%;
      padding: 5px;
      box-sizing: border-box;
      font-size: 14px;
      background-color: white;
    }
    .clearfix::after {
      clear: both;
      content: "";
      display: block;
    }
  }
}
</style>